export default {
  v_name: 'ncLoading',
  v_fun: {
    inserted(el, binding) {
      Object.defineProperty(binding.value, 'show', {
        set() {
          el.removeChild(document.getElementById('loading'));
        },
      });
      if (binding && !binding.value.show) {
        return;
      }
      // eslint-disable-next-line
      el.style.position = `relative`;
      const elw = el.clientWidth;
      const elh = el.clientHeight;
      const text = binding.value.text ? binding.value.text : '加载中';
      const style = {
        position: 'absolute',
        top: '0',
        left: '0',
        width: `${elw}px`,
        height: `${elh}px`,
        backgroundColor: binding.value.bg ? binding.value.bg : 'rgba(0, 0, 0, 0.7)',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        color: binding.value.color ? binding.value.color : '#fff',
      };
      const div = document.createElement('div');
      div.id = 'loading';
      Object.keys(style).forEach((key) => {
        div.style[key] = style[key];
      });
      const html = `<span><i class="el-icon-loading"></i></span><span> ${text}</span>`;
      div.innerHTML = html;
      el.appendChild(div);
    },
    update() {
      // eslint-disable-next-line
      // console.log(el);
    },
  },
};
